<%--
  Created by IntelliJ IDEA.
  User: zjsxx
  Date: 2/13/2018
  Time: 8:53 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>


<!-- Mirrored from www.zi-han.net/theme/hplus/project_detail.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:44 GMT -->
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - 项目详情</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">

    <link href="/css/animate.min.css" rel="stylesheet">
    <link href="/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <!-- Sweet Alert -->
    <link href="/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <%--<script type="text/javascript" src="/js/remote/api.js"></script>--%>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=lhynbQH5Ke8q8H4bGGGeuXbRAXyfblMV"></script>
</head>

<body class="gray-bg">
<div class="row">
    <div class="col-sm-9">
        <div class="wrapper wrapper-content animated fadeInUp">
            <div class="ibox">
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="m-b-md">
                                <div id="execute"></div>
                                <h2>
                                    <div id="deviceName"></div>
                                </h2>
                            </div>

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-5">
                            <dl class="dl-horizontal">

                                <dt>状态：</dt>
                                <div id="state"></div>
                                <br>
                                <dt>隐私：</dt>
                                <dd>
                                    <div id="devicePersonal"></div>
                                </dd>
                            </dl>
                        </div>
                        <div class="col-sm-7" id="cluster_info">
                            <dl class="dl-horizontal">

                                <dt>最后更新：</dt>
                                <dd>
                                    <div id="deviceUpdateTime"></div>
                                </dd>
                                <br>
                                <dt>创建于：</dt>
                                <dd>
                                    <div id="deviceCreateTime"></div>
                                </dd>

                            </dl>
                        </div>
                    </div>

                    <div class="row m-t-sm">
                        <div class="col-sm-12">
                            <div class="panel blank-panel">
                                <div class="panel-heading">
                                    <div class="panel-options">
                                        <ul class="nav nav-tabs">
                                            <li><a href="project_detail.html#tab-1" data-toggle="tab">设备位置</a>
                                            </li>
                                            <li class=""><a href="project_detail.html#tab-2" data-toggle="tab">传感器信息</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="panel-body">

                                    <div class="tab-content">
                                        <div class="tab-pane active" id="tab-1">
                                            <div id="allmap" style="width: 100%;height: 300px"></div>

                                        </div>
                                        <div class="tab-pane" id="tab-2">

                                            <table class="table table-striped">
                                                <thead>
                                                <tr>
                                                    <th>状态</th>
                                                    <th>名字</th>
                                                    <th>类型</th>
                                                    <th>创建时间</th>
                                                    <th>最后更新时间</th>
                                                </tr>
                                                </thead>
                                                <tbody id="sensorList">


                                                </tbody>
                                            </table>

                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="wrapper wrapper-content project-manager">
            <h4>设备描述</h4>
            <%--<img src="/img/wenku_logo.png" class="img-responsive">--%>
            <p class="small">
            <div id="desc"></div>
            <br>

            </p>
            <p class="small font-bold">
                <span><i class="fa fa-circle text-info"></i> 智能设备</span>
            </p>
            <h4>设备标签</h4>
            <ul class="tag-list" style="padding: 0">
                <div id="tags"></div>
            </ul>

        </div>
    </div>


    <div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                    </button>
                    <i class="fa fa-laptop modal-icon"></i>
                    <h4 class="modal-title">新增传感器</h4>
                    <small class="font-bold">将在您当前设备下新增传感器</small>
                </div>
                <div class="modal-body">

                    <div class="form-group"><label>传感器类型</label>
                        <select id="sensorType" placeholder="请选择传感器类型" class="form-control">
                            <option value="1">数值型传感器</option>
                            <option value="2">开关</option>
                            <option value="3">GPS</option>
                        </select>
                    </div>
                    <div class="form-group"><label>传感器名</label> <input id="sensorName" placeholder="请输入您的传感器取一个名字"
                                                                       class="form-control"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                    <button id="addSensorBtn" type="button" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>

</div>


</div>
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/content.min.js?v=1.0.0"></script>
<script src="/js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="/js/jquery.json.js"></script>
<script>


    $(document).ready(function () {
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return decodeURI(r[2]);
            return null; //返回参数值
        }

        function setValue(param, key) {

            if (getUrlParam(key) != "null") {
                param = getUrlParam(key);
            }
            return param;
        }

        //设置默认初始值
        var deviceId = 0;
        var deviceDesc = '那么帅的设备居然没有介绍？！';
        var deviceLongitude = 0;
        var deviceLatitude = 0;
        var userId = 0;
        var deviceState = '未知的状态';
        var deviceTag = "还没标签唉";
        var devicePersonal = "未知";
        var deviceName = "无名设备";
        var deviceCreateTime = "未知的创建时间";
        var deviceUpdateTime = "未知的更新时间";
        //获取参数
        deviceId = setValue(deviceId, 'deviceId');
        deviceDesc = setValue(deviceDesc, 'deviceDesc');
        deviceLongitude = setValue(deviceLongitude, 'deviceLongitude');
        deviceLatitude = setValue(deviceLatitude, 'deviceLatitude');
        userId = setValue(userId, 'userId');
        deviceState = setValue(deviceState, 'deviceState');
        deviceTag = setValue(deviceTag, 'deviceTag');
        devicePersonal = setValue(devicePersonal, 'devicePersonal');
        deviceName = setValue(deviceName, 'deviceName');
        deviceCreateTime = setValue(deviceCreateTime, 'deviceCreateTime');
        deviceUpdateTime = setValue(deviceUpdateTime, 'deviceUpdateTime');


        //设备描述
        $('#desc').append(deviceDesc);
        //设备名称
        $('#deviceNamedeviceName').append(deviceName);
        if (devicePersonal == 1) {
            $('#devicePersonal').append('公开设备');
        } else {
            $('#devicePersonal').append('私人设备');
        }
        //最后更新时间
        $('#deviceUpdateTime').append(deviceUpdateTime);
        //设备创建时间
        $('#deviceCreateTime').append(deviceCreateTime);
        // 百度地图定点
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(deviceLongitude, deviceLatitude);
        map.clearOverlays();
        var marker = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker);              // 将标注添加到地图中
        map.centerAndZoom(point, 18);
        map.addControl(new BMap.NavigationControl());

        //百度地图实验
        /* var opts = {
            width : 200,     // 信息窗口宽度
            height: 100,     // 信息窗口高度
            title : "海底捞王府井店" , // 信息窗口标题
            enableMessage:true,//设置允许信息窗发送短息
            message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
        }
        var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象
        marker.addEventListener("click", function(){
            map.openInfoWindow(infoWindow,point); //开启信息窗口
        });*/
        /*var polyline = new BMap.Polyline([
            new BMap.Point(120.570471,30.005685),//起始点的经纬度
            new BMap.Point(120.570471,80.005685)//终止点的经纬度
        ], {strokeColor:"red",//设置颜色
            strokeWeight:3, //宽度
            strokeOpacity:0.5});//透明度
        map.addOverlay(polyline);*/

        //标签显示
        var list = deviceTag.split('_');
        if (list.length == 0) {
            $('#tags').append("<li><a href=\"#\"><i class=\"fa fa-tag\"></i>" + "没有标签" + "</a></li>");
        } else {
            for (var i = 0; i < list.length; i++) {
                $('#tags').append("<li><a href=\"#\"><i class=\"fa fa-tag\"></i>" + list[i] + "</a></li>");
            }
        }
        //状态
        if (deviceState == 1) {
            $('#state').append("<dd><span class=\"label label-primary\">正常</span></dd>");
        } else {
            $('#state').append("<dd><span class=\"label label-danger\">停用</span></dd>");
        }
        //获取该设备所有的传感器
        var key = null;
        var v = document.cookie.split(";");
        for (var i = 0; i < v.length; i++) {
            var item = v[i].split("=");
            if (item[0] == 'easylink_user_token') {
                key = item[1];
                break;
            }
        }
        /**删除操作**/
        var delurl = "/userManager/deleteDevice/?deviceId=" + deviceId;
        delurl = encodeURI(delurl);
        $('#execute').append(" <a href=\"#\" id='delDevice' class=\"btn btn-danger btn-xs pull-right\">删除设备</a>\n");
        /**新增传感器页面**/
        var addSensorUrl = encodeURI("/userManager/addSensor/?deviceId=" + deviceId);
        //$('#execute').append("<a href=" + addSensorUrl + " class=\"btn btn-warning btn-xs pull-right\">新增传感器</a>");
        $('#execute').append("<button type=\"button\" data-toggle=\"modal\" data-target=\"#myModal\" class=\"btn btn-warning btn-xs pull-right\">新增传感器</button>");
        /**编辑页面**/
            //构建编辑页面的url
        var url = "/userManager/editDevice/?deviceId=" + deviceId;
        url = encodeURI(url);
        $('#execute').append("<a href=" + url + " class=\"btn btn-white btn-xs pull-right\">编辑设备</a>");

        function getSensorData(sensorType, sensorState, sensorCreatetime, sensorUpdatetime, sensorName, sensorId) {
            var urltype = sensorType;
            if (sensorType == 1) {
                sensorType = "开关";
            } else if (sensorType == 2) {
                sensorType = "数值型传感器";
            } else if (sensorType == 3) {
                sensorType = "GPS";
            }
            if (sensorState == 1) {
                sensorState = "<span class=\"label label-primary\"><i class=\"fa fa-check\"></i> 正常</span>\n";
            } else {
                sensorState = "<span class=\"label label-danger\"><i class=\"fa fa-check\"></i>不可用</span>\n"
            }
            var sensorLine = "<tr>\n" +
                " <td>\n" +
                sensorState +
                " </td>\n" +
                " <td>\n" + "<a href='/userManager/sensorInfo/?sensorId=" + sensorId + "&sensorType=" + urltype + "'>" +
                sensorName + "</a>" +
                " </td>\n" +
                " <td>\n" +
                sensorType +
                " </td>\n" +
                " <td>\n" + sensorCreatetime +
                " </td>\n" +
                " <td>\n" +
                "     <p class=\"small\">\n" +
                sensorUpdatetime +
                "     </p>\n" +
                " </td>\n" +
                "\n" +
                "                                                </tr>";
            return sensorLine;
        }

        $.ajax({
            type: 'GET',
            url: '/sensor/searchDeviceAllSensor/' + deviceId,
            headers: {
                'easylink_user_token': key
            },
            success: function (message) {
                $('#sensorList').empty();
                var data = message.data;
                for (var i = 0; i < data.length; i++) {
                    var item = data[i];
                    $('#sensorList').append(getSensorData(
                        item.sensorType,
                        item.sensorState,
                        item.sensorCreatetime,
                        item.sensorUpdatetime,
                        item.sensorName,
                        item.sensorId));
                }


            },
            error: function (message) {
                console.log(message);
            }
        });

        $("#loading-example-btn").click(function () {
            btn = $(this);
            simpleLoad(btn, true);
            simpleLoad(btn, false)
        });

        //删除设备
        $('#delDevice').click(function () {
            swal({
                title: "您确定要删除这个设备吗",
                text: "删除后将无法恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "是的，我要删除！",
                cancelButtonText: "让我再考虑一下…",
                closeOnConfirm: false,
                closeOnCancel: false
            }, function (isConfirm) {
                if (isConfirm) {
                    $.ajax({
                        type: 'GET',
                        url: '/device/deleteDevice/' + deviceId,
                        headers: {
                            'easylink_user_token': key
                        },
                        success: function (message) {
                            setTimeout(function (args) {
                                swal("删除成功", "设备已经被删除", "success");
                                $(location).attr('href', '/userManager/driverList');
                            }, 1000);

                        },
                        error: function (message) {
                            console.log(message);
                            swal("删除失败", message, "error");
                        }
                    });

                } else {
                    swal("已取消", "您取消了删除操作！", "error");
                }
            })

        });
        //当新增传感器的保存按钮按下
        $('#addSensorBtn').click(function () {
            var sensorName = $('#sensorName').val();
            var sensorType = $('#sensorType').val();
            //新增传感器
            $.ajax({
                type: 'POST',
                headers: {
                    'easylink_user_token': key
                },
                url: '/sensor/insertSensor',
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                data: $.toJSON({
                    "deviceId": deviceId,
                    "sensorName": sensorName,
                    "sensorType": sensorType
                }),
                success: function (message) {
                    if (message.status == 200) {
                        alert('新增传感器成功');
                        $('#myModal').modal('hide');
                        $.ajax({
                            type: 'GET',
                            url: '/sensor/searchDeviceAllSensor/' + deviceId,
                            headers: {
                                'easylink_user_token': key
                            },
                            success: function (message) {
                                $('#sensorList').empty();
                                var data = message.data;
                                for (var i = 0; i < data.length; i++) {
                                    var item = data[i];
                                    $('#sensorList').append(getSensorData(
                                        item.sensorType,
                                        item.sensorState,
                                        item.sensorCreatetime,
                                        item.sensorUpdatetime,
                                        item.sensorName,
                                        item.sensorId));
                                }


                            },
                            error: function (message) {
                                console.log(message);
                            }
                        });
                    } else {
                        console.log(message);
                        alert('新增传感器失败:' + message.msg);
                    }
                },
                error: function (message) {
                    console.log(message);
                }
            });
        });
    });

    function simpleLoad(btn, state) {
        if (state) {
            btn.children().addClass("fa-spin");
            btn.contents().last().replaceWith(" Loading")
        } else {
            setTimeout(function () {
                btn.children().removeClass("fa-spin");
                btn.contents().last().replaceWith(" Refresh")
            }, 2000)
        }
    };
</script>
<script type="text/javascript" src="/js/remote/stats9051096.js" charset="UTF-8"></script>

</body>


</html>
